<template>
    <div ref="contentwarp" class="contentwarp">
        <div class="maprow">
            <div class="deviceCtl"><i @click="toggleDeviceCtl" class="fa fa-exchange fa-fw fa-lg"></i></div>
            <div v-show="peopleShow" class="peopleCtl"><i @click="togglePeopleCtl" class="fa fa-expand fa-fw fa-lg"></i></div>
            <div v-show="!peopleShow" class="peopleList">
                <div class="peopleListBoxTool">
                    <i @click="togglePeopleCtl" class="item fa fa-compress fa-fw"></i>
                    <i @click="referNearBy" class="item fa fa-refresh fa-fw"></i>
                </div>
                <div class="peopleListBoxContent">
                    <ul>
                        <li v-for="item in nearByData[currentDeviceId]" :key="item.id" class="item">
                            <img class="avatar" :src="item.avatar_small">
                            <p class="message">
                                <span class="name">
                                    <small class="text-muted pull-right">
                                        {{item.created_at}}
                                        <el-button @click='trail' size="mini" round>轨迹</el-button></small>
                                    {{item.name}} {{item.distance}}
                                </span>
                                {{item.signature}}
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="peopleListBoxFoot">
                    <el-pagination @current-change="loadNearBy" :current-page.sync="nearByPage" layout="prev, pager, next"
                        :total="nearByTotal"></el-pagination>
                </div>
            </div>
            <div style="width:100%;height:100%;" class="dashboardMap">
                <div id="qqmap"></div>
            </div>
            <div ref="dashboardDevice" class="dashboardDevice">
                <ul>
                    <!-- <li class="item">
                        <span class="address"></span>
                        <span class="data" style="width:88px;">
                            <span @click='isCheckAll=!isCheckAll' style="padding:0 10px;color:#fff;cursor:pointer">全选</span>
                            <el-checkbox @change='checkAll' v-model="isCheckAll"></el-checkbox>
                        </span>
                    </li> -->
                    <li class="item" v-for="(item, key, index) in deviceData" :key="item.key" :index="index">
                        <el-tooltip class="item" effect="dark" :content="item.address" placement="top-start">
                            <span class="address" v-text='item.address'></span>
                        </el-tooltip>
                        <span class="data">
                            <!-- <el-button @click.stop="oneDot(item)" type="primary">数据</el-button> -->
                            <el-checkbox @change='prominent(item)' v-model="item.isCheck"></el-checkbox>
                        </span>
                        <!-- <p class="deviceSelect">
                          <el-tooltip effect="light" placement="left-start">
                              <div slot="content">地址:{{item.address}}<br/>频率:30分钟/次<br/>备注:{{item.desc}}</div>
                          <el-radio @change="changeSelectDevice" v-model="currentDeviceIndex" :name="item.name" :label="key">{{item.name}}{{index}}</el-radio>
                          </el-tooltip>
                      </p>
                      <p class="deviceStatus"><el-switch v-model="item.dstatus" active-value="2" inactive-value="3" active-color="#13ce66" inactive-color="#ff4949"></el-switch></p> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapGetters } from 'vuex'
    import { TMap } from '../../utils/tmap'
    export default {
        data() {
            return {
                currentDate: new Date(),
                isCheckAll: true,
                deviceData: [{
                    phone: "-",
                    isCheck: true,
                    address: "北京市海淀区永泰庄北路东升镇",
                    created_at: "2018-12-13 16:37:36",
                    desc: "vx10001号设备6.0.2-root",
                    dstatus: "1",
                    id: 1,
                    latitude: "40.04271274583365",
                    longitude: "116.37735307216644",
                    name: "VX10001",
                    place_id: 1,
                    status: 1,
                    uniqid: "355136055872165",
                    updated_at: "2018-12-13 16:37:36",
                }, {
                    address: "北京市朝阳区安立路奥运村街道",
                    created_at: "2018-12-13 16:36:48",
                    desc: "vx10002号设备6.0.1-root",
                    dstatus: "2",
                    id: 2,
                    isCheck: true,
                    latitude: "40.010902184902676",
                    longitude: "116.40662133693695",
                    name: "VX10002",
                    phone: "-",
                    place_id: 2,
                    status: 2,
                    uniqid: "861571030993305",
                    updated_at: "2018-12-13 16:36:48",
                }, {
                    address: "北京市朝阳区背街小巷来广营乡",
                    created_at: "2018-12-13 16:59:21",
                    desc: "vx10001号设备6.0.2-root",
                    dstatus: "1",
                    id: 3,
                    isCheck: true,
                    latitude: "40.030095455398026",
                    longitude: "116.42953813076019",
                    name: "VX10001",
                    phone: "-",
                    place_id: 1,
                    status: 1,
                    uniqid: "355136055872165",
                    updated_at: "2018-12-13 16:59:21",
                }, {
                    address: "北京市昌平区天通苑南街道",
                    created_at: "2018-12-13 17:44:54",
                    desc: "vx10001号设备6.0.2-root",
                    dstatus: "1",
                    id: 4,
                    isCheck: true,
                    latitude: "40.04317270710705",
                    longitude: "116.39589250087738",
                    name: "VX10001",
                    phone: "-",
                    place_id: 1,
                    status: 1,
                    uniqid: "355136055872165",
                    updated_at: "2018-12-13 17:44:54",
                }, {
                    address: "北京市朝阳区清林路奥运村街道",
                    created_at: "2018-12-13 17:44:58",
                    desc: "vx10002号设备6.0.1-root",
                    dstatus: "2",
                    id: 5,
                    isCheck: true,
                    latitude: "40.03206706090916",
                    longitude: "116.40567719936371",
                    name: "VX10002",
                    phone: "-",
                    place_id: 2,
                    status: 2,
                    uniqid: "861571030993305",
                    updated_at: "2018-12-13 17:44:58",
                }, {
                    address: "北京市朝阳区清河东路奥运村街道",
                    created_at: "2018-12-13 17:47:13",
                    desc: "vx10001号设备6.0.2-root",
                    dstatus: "1",
                    id: 6,
                    latitude: "40.02575772266624",
                    longitude: "116.39314591884613",
                    name: "VX10001",
                    phone: "-",
                    place_id: 1,
                    status: 1,
                    isCheck: true,
                    uniqid: "355136055872165",
                    updated_at: "2018-12-13 17:47:13",
                }, {
                    address: "北京市朝阳区清河路奥运村街道",
                    created_at: "2018-12-13 17:47:10",
                    desc: "vx10002号设备6.0.1-root",
                    dstatus: "2",
                    id: 7,
                    latitude: "40.02956968430337",
                    longitude: "116.38404786586761",
                    name: "VX10002",
                    phone: "-",
                    place_id: 2,
                    isCheck: true,
                    status: 2,
                    uniqid: "861571030993305",
                    updated_at: "2018-12-13 17:47:10",
                }],
                nearByData: [],
                nearByTotal: 0,
                nearByPage: 1,
                currentDeviceId: 0,
                deviceShow: true,
                peopleShow: true,
                currentDeviceIndex: 0,
                lastDeviceIndex: 0,
                dashboardMapWidth: 0,
                dashboardDeviceWidth: 0,
                qqMap: { MarkersArray: [], OverlayArray: [] },
                circles: [],
                markers: [],
                labels: [],
                polylines: [],
            }
        },
        watch: {
            deviceData: {
                handler: function (val, oldVal) {

                },
                deep: true
            },
            isCheckAll(val, oldVal) {
                if (val) {
                    for (let i of this.deviceData) {
                        i.isCheck = true;
                        this.prominent(i)
                    }
                } else {
                    for (let i of this.deviceData) {
                        i.isCheck = false;
                        this.prominent(i)
                    }
                }
            }
        },
        methods: {
            ...mapActions({
                initUser: 'InitUser'
            }),
            checkAll() { },
            initMap: function () {
                TMap('BH3BZ-OWLW6-6KNSQ-MHGH5-ABJHZ-4KFW6').then(qq => {
                    let that = this
                    that.qqMap.qq = qq
                    that.dashboardDeviceWidth = this.$refs.dashboardDevice.clientWidth
                    that.dashboardMapWidth = this.$refs.contentwarp.clientWidth - that.dashboardDeviceWidth - 5

                    that.qqMap.center = new qq.maps.LatLng(40.01945601727397, 116.46899342536926)
                    /* eslint-disable no-new */
                    that.qqMap.map = new qq.maps.Map(document.getElementById('qqmap'), {
                        // 地图的中心地理坐标。
                        center: that.qqMap.center,
                        draggable: true,
                        zoom: 15,
                        disableDefaultUI: true
                    })
                    that.loadAllDevice()
                })
            },
            loadData: function (page) {
                let that = this
                this.$axios.get('http://47.96.4.38/addTextImage/articles.php', { params: { page: page } }).then(function (res) {
                    if (res.data.status === 1) {
                        that.articleData = res.data.list
                        that.currentTotal = res.data.count
                        that.backTop()
                    }
                })
            },
            loadAllDevice: function () {
                let that = this
                this.$axios.get(this.APIURL + '/device/all').then(function (response) {
                    if (response !== false) {
                        // that.deviceData = response.data
                        // that.currentDeviceId = that.deviceData[0].id
                        that.loadNearBy(1)
                        that.qqMap.map.panTo(new qq.maps.LatLng(that.deviceData[0].latitude, that.deviceData[0].longitude));
                        for (let item of that.deviceData) {
                            if (parseInt(item.latitude) > 0 && parseInt(item.longitude) > 0) {
                                that.addMarker(item.latitude, item.longitude, item.address, item.isCheck);
                            }
                        }
                    }
                })
            },
            //获取一个点搜索到的数据
            oneDotData(event) {
                for (let i of this.deviceData) {
                    if (i.latitude == event.latLng.lat && i.longitude == event.latLng.lng) {
                        //console.log(i)
                    }
                }
            },
            //添加点和圆
            addMarker: function (lat, lng, address, isCheck) {
                let that = this
                var center = new qq.maps.LatLng(lat, lng);
                var anchor = new qq.maps.Point(6, 6),
                    size = new qq.maps.Size(24, 24),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage('https://lbs.qq.com/javascript_v2/img/center.gif', size, origin, anchor);
                var marker = new qq.maps.Marker({
                    icon: icon,
                    position: center,
                    animation: qq.maps.MarkerAnimation.DROP,
                    map: that.qqMap.map
                });
                let color = isCheck ? new qq.maps.Color(0, 191, 255, 0.6) : new qq.maps.Color(0, 0, 0, 0.4)
                qq.maps.event.addListener(marker, 'click', function (event) {
                    that.oneDotData(event)
                });
                var circle = new qq.maps.Circle({
                    map: that.qqMap.map,
                    center: center,
                    radius: 500,
                    fillColor: color,
                    strokeWeight: 0
                });
                var label = new qq.maps.Label({
                    position: center,
                    map: that.qqMap.map,
                    content: address
                });
                that.circles.push(circle)
                that.markers.push(marker)
                that.labels.push(label)
            },
            //清除覆盖物
            clearOverlays: function (overlays) {
                var overlay;
                while (overlay = overlays.pop()) {
                    overlay.setMap(null);
                }
            },
            trail() {
                let trailData = [];
                this.clearOverlays(this.polylines)
                for (let i of this.deviceData) {
                    if (i.isCheck) {
                        trailData.push(new qq.maps.LatLng(i.latitude, i.longitude))
                    }
                }
                let that = this;
                let polyline = new qq.maps.Polyline({
                    path: trailData,
                    strokeColor: '#FF0000',
                    strokeWeight: 2,
                    editable: false,
                    map: that.qqMap.map,
                });
                this.polylines.push(polyline)
            },
            oneDot(item) {
                this.clearOverlays(this.circles)
                this.clearOverlays(this.markers)
                this.clearOverlays(this.labels)
                this.addMarker(item.latitude, item.longitude, item.address, item.isCheck)
                this.circles[0].setFillColor(new qq.maps.Color(0, 0, 0, 0.4));
                this.currentDeviceId = item.id;
                this.nearByPage = 1;
                this.loadNearBy(this.nearByPage)
            },
            prominent(item) {
                this.clearOverlays(this.polylines)
                for (let i = 0; i < this.circles.length; i++) {
                    if (this.circles[i].center.lat == item.latitude && this.circles[i].center.lng == item.longitude) {
                        if (item.isCheck) {
                            this.markers[i].setVisible(true)
                            this.circles[i].setFillColor(new qq.maps.Color(0, 191, 255, 0.6));
                        } else {
                            this.markers[i].setVisible(false)
                            this.circles[i].setFillColor(new qq.maps.Color(0, 0, 0, 0.4));
                        }
                    }
                }
            },
            loadNearBy: function (pages) {
                let that = this
                this.$axios.get(this.APIURL + '/nearby/list', { params: { id: that.currentDeviceId, page: pages } }).then(function (response) {
                    if (response !== false) {
                        that.$set(that.nearByData, that.currentDeviceId, response.data)
                        that.nearByTotal = parseInt(response.total)
                    }
                })
            },
            referNearBy: function () {
                let that = this
                this.$set(this.nearByData, this.currentDeviceId, [])
                that.loadNearBy(this.nearByPage)
            },
            toggleDeviceCtl: function () {
                this.deviceShow = !this.deviceShow
                if (this.deviceShow === true) {
                    this.dashboardMapWidth -= (this.dashboardDeviceWidth + 5)
                } else {
                    this.dashboardMapWidth += (this.dashboardDeviceWidth + 5)
                }
            },
            togglePeopleCtl: function () {
                this.peopleShow = !this.peopleShow
            },
            changeSelectDevice: function (index) {
                // 处理lastDeviceIndex
                this.currentDeviceId = this.deviceData[this.currentDeviceIndex].id
                // 定位到当前点
                if (this.qqMap.MarkersArray[this.currentDeviceId]) {
                    this.qqMap.map.panTo(this.qqMap.MarkersArray[this.currentDeviceId].getPosition())
                }
                this.referNearBy()
                this.lastDeviceIndex = this.currentDeviceIndex
            }
        },
        computed: {
            ...mapGetters({
                isLogin: 'IsLogin'
            })
        },
        mounted: function () {
            this.initMap()
        }
    }
</script>
<style scoped>
    .el-button {
        padding: 4px 7px;
    }

    .maprow {
        height: 100%;
        width: 100%
    }

    .dashboardMap {
        float: left;
        width: 74%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .dashboardDevice {
        width: 250px;
        height: 90%;
        position: absolute;
        top: 30px;
        right: 20px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
    }

    .dashboardDevice ul li {
        list-style: none;
        height: 40px;
        border-bottom: 1px solid #eeeeee;
        font-size: 14px;
        margin-bottom: 5px;
        padding-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }

    .dashboardDevice ul .item .deviceSelect {
        width: 90px;
        margin: 0px;
        padding: 0px;
        float: left;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
    }

    .dashboardDevice ul .item .deviceName {
        width: 104px;
        margin: 0px;
        padding: 0px;
        float: left;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
    }

    .dashboardDevice ul .item .deviceStatus {
        width: 40px;
        margin: 0px;
        padding: 0px;
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .dashboardDevice ul .item .address {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
        padding: 0 5px 0 0;
        color: #fff;
    }

    .dashboardDevice ul .item .data {
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .deviceCtl {
        position: absolute;
        left: 10px;
        color: #409EFF;
        background-color: rgba(0, 0, 0, 0.2);
        height: 28px;
        z-index: 100
    }

    .peopleCtl {
        position: absolute;
        left: 10px;
        bottom: 10px;
        color: #409EFF;
        background-color: rgba(0, 0, 0, 0.2);
        height: 26px;
        z-index: 100
    }

    .peopleList {
        position: absolute;
        left: 10px;
        bottom: 10px;
        color: #409EFF;
        background-color: rgba(0, 0, 0, 0.4);
        height: 500px;
        width: 500px;
        z-index: 100;
    }

    .peopleListBoxTool {
        height: 26px;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .peopleListBoxTool .item {
        float: right;
        padding: 5px;
    }

    .peopleListBoxTool .item:hover {
        float: right;
        padding: 5px;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .peopleListBoxContent {
        color: #ffffff;
    }

    .peopleListBoxContent ul {
        width: 480px;
        padding: 10px;
        margin: 0px;
        height: 425px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .peopleListBoxContent .item {
        list-style: none;
        height: 50px;
        border-bottom: 1px solid #ffffff;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 14px;
    }

    .peopleListBoxContent .item>.message {
        margin-left: 55px;
        margin-top: -40px;
    }

    .peopleListBoxContent p {
        margin: 0 0 10px;
    }

    .peopleListBoxContent .item>.message>.name {
        display: block;
        font-weight: 600;
    }

    /*滚动条样式*/
    .dashboardDevice ul::-webkit-scrollbar,
    .peopleListBoxContent ul::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
        margin: 0px;
    }

    .dashboardDevice ul::-webkit-scrollbar-thumb,
    .peopleListBoxContent ul::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    .dashboardDevice ul::-webkit-scrollbar-track,
    .peopleListBoxContent ul::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .dashboardDevice ul {
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
        margin: 0px 0px 0px 10px;
        height: 100%;
        overflow: scroll;
    }
</style>